<template>
	<view>
		<u-navbar title="签到" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<view :style="'margin-top:' + navH + 'px;'">
			<!-- 签到 -->
			<view class='sign'>
				<view class='header bgcolor'>
					<view class='headerCon acea-row row-between-wrapper'>
						<view class='left acea-row row-between-wrapper'>
							<view class='pictrue'>
								<image :src='userInfo.headimg'></image>
							</view>
							<view class='text'>
								<view class='line1'>{{userInfo.user_name}}</view>
								<view class='integral acea-row'><text>积分: {{userInfo.pay_points}}</text></view>
							</view>
						</view>
						<view class='right acea-row row-middle' @click='goSignList'>
							<view class='iconfont icon-caidan'></view>
							<view>明细</view>
						</view>
					</view>
				</view>
				<view class='wrapper'>
					<scroll-view scroll-x="true" class='list flex' style="white-space: nowrap;"
						:scroll-into-view="toView" scroll-with-animation='true'>
						<!-- <view class='list'> -->
						<view class='item' v-for="(item,index) in signSystemList" :key="index" :id="'item'+index">
							<view class="txt">
								<view :class='(index+1) == signSystemList.length ? "rewardTxt" : ""'
									style="margin: 0 auto;">
									{{(item.day=='第三十天' || item.day=='第30天')?'奖励+500':item.day}}
								</view>
							</view>
							<view class='venus'
								:class="(index + 1 === signSystemList.length ? 'reward' : '') + ' ' +(sign_index >= index + 1 ? 'venusSelect' : '')">
							</view>
							<view class='num' :class="sign_index >= index + 1 ? 'on' : ''">+{{item.sign_num}}</view>
						</view>
						<!-- </view> -->
					</scroll-view>
					<button class='but bg-color on' v-if="userInfo.is_sign">今日已签到</button>
					<form @submit="goSign" v-else>
						<button class='but bg-color' formType="submit">立即签到</button>
					</form>
					<view class='lock'></view>
				</view>
				<view class='wrapper wrapper2'>
					<view class='tip'>已连续签到</view>
					<view class='list2 acea-row row-center row-bottom'>
						<view class='item'>{{signCount[0] || 0}}</view>
						<view class='item'>{{signCount[1] || 0}}</view>
						<view class='item'>{{signCount[2] || 0}}</view>
						<view class='item'>{{signCount[3] || 0}}</view>
						<view class='data'>天</view>
					</view>
					<view class='tip2'>签到规则:30天一个周期，每天递增1个积分，连续签到30天再奖励500积分.(所得积分可用于积分商城兑换商品)</view>
					<view class='list3'>
						<view class='item acea-row' v-for="(item,index) in signList" :key="index">
							<view>
								<view class='name line1'>签到奖励</view>
								<view class='data'>{{item.create_time}}</view>
							</view>
							<view class='num'>+{{item.sign_total}}</view>
						</view>
						<view class='loading' @click='goSignList' v-if="signList.length >= 3">点击加载更多<text
								class='iconfont icon-xiangyou'></text></view>
					</view>
				</view>
				<view class='signTip acea-row row-center-wrapper' :class='active==true?"on":""'>
					<view class='signTipLight loadingpic'></view>
					<view class='signTipCon'>
						<view class="signHeight">
							<image :src="img_url +'/statics/yilangmp/signH.png'"></image>
						</view>
						<view class='state'>签到成功</view>
						<view class='integral'>获得{{integral}}积分</view>
						<view class='signTipBnt' @click='close'>好的</view>
					</view>
				</view>
				<view class='mask' @touchmove.stop.prevent="false" :hidden='active==false'></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toLogin
	} from "@/libs/login";
	import {
		mapGetters
	} from "vuex";
	import {

	} from '@/api/store.js'
	import {
		userInfo,
		sign_list,
		sign
	} from '@/api/user';
	import {
		BASE_URL
	} from "@/config/app";

	const common = require('@/mixins/common');
	var options = {};
	common(options);
	export default {
		mixins: [{
			methods: options
		}],
		computed: mapGetters(["isLogin", "app_token"]),
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				active: false,
				userInfo: {
					headimg: '',
					user_name: '',
					pay_points: 0,
					is_sign: 0,
					sign_total: 0,
					user_id: 0
				},
				signCount: [],
				signSystemList: [],
				signList: [],
				integral: 0,
				sign_index: 0,
				toView: "",
				img_url: BASE_URL
			}
		},
		onLoad() {
			var that = this;
			this.navH = getApp().globalData.navHeight / 2;
			if (this.isLogin) {
				this.getUserInfo();
				this.getSignList();
			} else {
				//#ifndef MP
				// toLogin();
				//#endif
			}
			for (var i = 1; i < 31; i++) {
				var obj = {
					day: that.Rp(i),
					sign_num: i
				}
				that.signSystemList.push(obj)
			}
		},
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getUserInfo();
						this.getSignList();
					}
				},
				deep: true
			}
		},
		methods: {
			// #ifdef MP-WEIXIN
			// 小程序分享
			onShareAppMessage: function(options) {
				var that = this;
				var path = '/pages/users/user_sign/index?user_id=' + this.userInfo.user_id
				return {
					title: '每日签到',
					path: path,
					imageUrl: '',
					success: function(res) {},
					fail: function() {},
				};
			},

			// 分享到朋友圈
			onShareTimeline(res2) {
				var that = this;
				var path = '/pages/users/user_sign/index?user_id=' + this.userInfo.user_id
				return {
					title: '每日签到',
					path: path,
					imageUrl: '',
					success: function(res) {},
					fail: function() {},
				}
			},
			// #endif
			/**
			 * 去签到记录页面
			 * 
			 */
			goSignList: function() {
				if (!this.isLogin) {
					return this.$util.Tips({
						title: '请先登录'
					}, '/pages/users/login/index')
				}
				return this.$util.Tips('/pages/users/user_sign_list/index');
			},
			/**
			 * 获取用户信息
			 */
			getUserInfo: function() {
				let that = this;
				userInfo({
					app_token: that.app_token
				}).then(res => {
					let sum_sgin_day = res.data.sign_total;
					that.$set(that, 'userInfo', res.data);
					that.signCount = that.PrefixInteger(sum_sgin_day, 4);
					that.sign_index = res.data.sign_total;
					that.toView = "item" + (that.sign_index - 1);
				});
			},
			/**
			 * 获取签到列表
			 * 
			 */
			getSignList: function() {
				let that = this;
				sign_list({
					page: 1,
					app_token: that.app_token
				}).then(res => {
					that.$set(that, 'signList', res.data);
				})
			},
			/**
			 * 数字转中文
			 * 
			 */
			Rp(num) {
				// let cnum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
				// let s = '';
				// n = '' + n; // 数字转为字符串
				// for (let i = 0; i < n.length; i++) {
				// 	s += cnum[parseInt(n.charAt(i))];
				// }
				// return "第"+ s + "天";

				var arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
				var arr2 = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿']
				if (!num || isNaN(num)) return '零'
				var english = num.toString().split('')
				var result = ''
				for (var i = 0; i < english.length; i++) {
					var des_i = english.length - 1 - i // 倒序排列设值
					result = arr2[i] + result
					var arr1_index = english[des_i]
					result = arr1[arr1_index] + result
				}
				result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十') // 将【零千、零百】换成【零】 【十零】换成【十】
				result = result.replace(/零+/g, '零') // 合并中间多个零为一个零
				result = result.replace(/零亿/g, '亿').replace(/零万/g, '万') // 将【零亿】换成【亿】【零万】换成【万】
				result = result.replace(/亿万/g, '亿') // 将【亿万】换成【亿】
				result = result.replace(/零+$/, '') // 移除末尾的零
				// 将【一十】换成【十】
				result = result.replace(/^一十/g, '十')
				return "第" + result + "天"
			},
			/**
			 * 数字分割为数组
			 * @param int num 需要分割的数字
			 * @param int length 需要分割为n位数组
			 */
			PrefixInteger: function(num, length) {
				return (Array(length).join('0') + num).slice(-length).split('');
			},

			/**
			 * 用户签到
			 */
			goSign: function(e) {
				if (!this.isLogin) {
					return this.$util.Tips({
						title: '请先登录'
					}, '/pages/users/login/index')
				}
				let that = this,
					sum_sgin_day = that.userInfo.sign_total;
				if (that.userInfo.is_sign) return this.$util.Tips({
					title: '您今日已签到!'
				});
				sign({
					app_token: that.app_token
				}).then(res => {
					that.active = true;
					that.integral = res.data;
					that.sign_index = (that.sign_index + 1) > that.signSystemList.length ? 1 : that
						.sign_index + 1;
					that.signCount = that.PrefixInteger(sum_sgin_day + 1, 4);
					that.getUserInfo();
					that.getSignList();
				}).catch(err => {
					return this.$util.Tips({
						title: err
					})
				});
			},
			/**
			 * 关闭签到提示
			 */
			close: function() {
				this.active = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.bgcolor {
		background-color: $theme-color;
	}

	.sign .header {
		width: 100%;
		height: 310rpx;
	}

	.sign .header .headerCon {
		padding: 0 0 0 30rpx;
		height: 234rpx;
	}

	.sign .header .headerCon .left {
		width: 530rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.sign .header .headerCon .left .integral text {
		font-size: 24rpx;
		margin-top: 19rpx;
		background-color: #ff9000;
		text-align: center;
		border-radius: 6rpx;
		font-weight: normal;
		padding: 4rpx 15rpx;
	}

	.sign .header .headerCon .text {
		width: 410rpx;
	}

	.sign .header .headerCon .left .pictrue {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 4rpx solid #ecddbc;
	}

	.sign .header .headerCon .left .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.sign .header .headerCon .right {
		width: 142rpx;
		height: 66rpx;
		background-color: #fff;
		border-radius: 50rpx 0 0 50rpx;
		font-size: 24rpx;
		color: #ff9000;
	}

	.sign .header .headerCon .right .iconfont {
		font-size: 33rpx;
		padding: 0 10rpx 0 30rpx;
		margin-top: 5rpx;
	}

	.sign .wrapper {
		background-color: #fff;
		margin: -80rpx 20rpx 0 20rpx;
		border-radius: 15rpx;
		padding-bottom: 80rpx;
		position: relative;
	}

	.sign .wrapper .list {
		height: 240rpx;
	}

	.sign .wrapper .list .item {
		display: inline-block;
		height: 240rpx;
		width: 80px;
		font-size: 22rpx;
		color: #8a8886;
		text-align: center;
		line-height: 40px;

		.txt {
			height: 40px;
			display: flex;
			align-items: center;
		}
	}

	.sign .wrapper .list .item .txt .rewardTxt {
		// width: 80rpx;
		height: 40rpx;
		background-color: #f4b409;
		border-radius: 16rpx;
		font-size: 26rpx;
		color: #ffffff;
		line-height: 40rpx;
		margin: 0 auto;
	}

	.sign .wrapper .list .item .num {
		font-size: 30rpx;
		color: #999;
	}

	.sign .wrapper .list .item .num.on {
		color: #ff9000;
	}

	.sign .wrapper .list .item .venus {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 56rpx;
		height: 56rpx;
		margin: 0 auto;
	}

	.sign .wrapper .list .item .venus.venusSelect {
		background-image: url('');
	}

	.sign .wrapper .list .item .venus.reward {
		background-image: url('');
		width: 75rpx;
		height: 56rpx;
	}

	.sign .wrapper .but {
		width: 400rpx;
		height: 76rpx;
		font-size: 30rpx;
		line-height: 76rpx;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		margin: 0 auto;
	}

	.sign .wrapper .but.on {
		background-color: #999 !important;
	}

	.sign .wrapper .lock {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 558rpx;
		height: 68rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -42rpx;
		z-index: 9;
	}

	.sign .wrapper2 {
		margin-top: 15rpx;
		padding: 73rpx 0 0 0;
	}

	.sign .wrapper2 .tip {
		font-size: 30rpx;
		color: #666;
		text-align: center;
	}

	.sign .wrapper2 .list2 {
		margin: 45rpx 0 49rpx 0;
	}

	.sign .wrapper2 .list2 .item {
		border-radius: 10rpx;
		background-color: $theme-color;
		width: 80rpx;
		height: 116rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #fff;
		font-size: 72rpx;
		text-align: center;
		line-height: 116rpx;
		margin-right: 19rpx;
		background-image: url('');
	}

	.sign .wrapper2 .list2 .data {
		font-size: 30rpx;
		color: #232323;
	}

	.sign .wrapper2 .tip2 {
		font-size: 24rpx;
		color: #999999;
		padding: 0 55rpx;
		text-align: center;
		line-height: 1.5;
	}

	.sign .list3 {
		margin: 45rpx 37rpx 0 37rpx;
		border-top: 1px dashed #eee;
	}

	.sign .list3 .item {
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		height: 130rpx;
	}

	.sign .list3 .item .name {
		color: #232323;
		font-size: 30rpx;
		width: 400rpx;
	}

	.sign .list3 .item .data {
		font-size: 24rpx;
		color: #bbbbbb;
		margin-top: 9rpx;
	}

	.sign .list3 .item .num {
		font-size: 36rpx;
		font-family: 'Guildford Pro';
		color: #E93323;
	}

	.sign .list3 .loading {
		font-size: 26rpx;
		color: #282828;
		height: 97rpx;
		line-height: 97rpx;
		text-align: center;
	}

	.sign .list3 .loading .iconfont {
		font-size: 25rpx;
		color: #212121;
		vertical-align: 2rpx;
		margin-left: 10rpx;
	}

	.sign .signTip {
		width: 644rpx;
		height: 645rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -322rpx;
		margin-top: -322.5rpx;
		z-index: 99;
		text-align: center;
		transition: all 0.3s ease-in-out 0s;
		opacity: 0;
		transform: scale(0);
	}

	.sign .signTip .signTipLight {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.sign .signTip.on {
		opacity: 1;
		transform: scale(1);
	}

	.sign .signTip .signTipCon {
		background: url('') no-repeat;
		background-size: 100% 100%;
		width: 420rpx;
		height: 410rpx;
		margin-top: -642rpx;
		position: relative;
		background-color: $theme-color;
		border-radius: 10rpx;
	}

	.sign .signTip .signTipCon .signHeight {
		width: 134rpx;
		height: 120rpx;
		position: absolute;
		left: 50%;
		margin-left: -67rpx;
		top: -60rpx;
	}

	.sign .signTip .signTipCon .signHeight image {
		width: 100%;
		height: 100%;
	}

	.sign .signTip .signTipCon .state {
		font-size: 34rpx;
		color: #fff;
		margin-top: 150rpx;
	}

	.sign .signTip .signTipCon .integral {
		font-size: 30rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-top: 9rpx;
	}

	.sign .signTip .signTipCon .signTipBnt {
		font-size: 30rpx;
		color: $theme-color;
		width: 260rpx;
		height: 76rpx;
		background-color: #f8d168;
		border-radius: 38rpx;
		line-height: 76rpx;
		margin: 48rpx auto 0 auto;
	}
</style>